<template>
	<view class="main-box">
		<view class="info-box">
			<view class="avatar-box">
				<!-- 头像 -->
				<uv-avatar @click="editUser" size="80" :src="isLogin ? userInfo.avatar : ''"></uv-avatar>
				<view class="nickname-box">
					<view class="vip-box">
						<view class="nickname">{{ userInfo?.nickname || nickname }}</view>
						<image class="vip-img" src="@/static/images/vip_tag.png"></image>
					</view>
					<view class="id-box" @click="onCopy(userInfo.id)">
						<text class="text">UID: {{ userInfo?.id || 88888 }}</text>
						<uv-icon v-if="userInfo.id" name="outline-copy" customPrefix="iconfont" size="15"></uv-icon>
					</view>
					<view class="tag-box">
						<text class="tag-num">1</text>
						<text>密友</text>
						<text class="tag-num">22</text>
						<text>关注</text>
						<text class="tag-num">223</text>
						<text>粉丝</text>
					</view>
				</view>
			</view>

			<view class="fans-box">
				<view class="tag-btn" @click="wallet">
					<image class="icon-img" src="/static/images/icon_diamond.png"></image>
					<text>钻石</text>
				</view>
				<view class="tag-btn" v-if="friendEnabled" @click="point">
					<image class="icon-img" src="/static/images/icon_gold.png"></image>
					<text>金币</text>
				</view>
				<view class="tag-btn" @click="toTrend">
					<image class="icon-img" src="/static/images/trend.png"></image>
					<text>动态</text>
				</view>
				<view class="tag-btn" @click="toGift">
					<image class="icon-img" src="/static/images/icon_people.png"></image>
					<text>礼物</text>
				</view>
			</view>

			<view class="vip-box" v-if="isPass && friendEnabled" @click="toVip">
				<vip-card></vip-card>
			</view>


			<!-- 签到日历 -->
			<view class="content-box calendar">
				<view class="sign-everyday ss-flex ss-col-center ss-row-between ss-p-x-30" >
					<view class="sign-num-box">
						已连续签到 <text class="sign-num">{{ signInfo.continuousDay }}</text> 天
					</view>
					<uv-button  v-if="!signInfo.todaySignIn" class="sign-btn" @click="onSign" text="签到" 
						color="linear-gradient(90deg, #ff6000, #fe832a)" shape="circle"></uv-button>
					<uv-button v-else  class="already-btn"  text="已签到" shape="circle"></uv-button>
				</view>
				<view class="calendarView list acea-row row-between-wrapper">
					<view class="item" v-for="(item, index) in signConfigList" :key="index">
						<view
							:class="(index  === signConfigList.length ? 'reward' : '') + ' ' +(signInfo.continuousDay >= item.day ? 'rewardTxt' : '')">
							第{{ item.day }}天</view>

						<view class="venus"
							:class=" (index + 1 === signConfigList.length ? 'reward' : '') +' ' +(signInfo.continuousDay >= item.day ? 'venusSelect' : '')">
						</view>

						<view class="num"> + {{ item.point }}</view>
					</view>
				</view>
			</view>

			<!-- 签到结果弹窗 -->
			<su-popup :show="showModel" type="center" round="10" :isMaskClick="false">
				<view class="model-box ss-flex-col">
					<view class="ss-m-t-56 ss-flex-col ss-col-center">
						<text class="cicon-check-round"></text>
						<view class="score-title">
							<text v-if="signResult.point">{{ signResult.point }} 积分 </text>
							<text v-if="signResult.experience"> {{ signResult.experience }} 经验</text>
						</view>
						<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
							已连续打卡 {{ signResult.day }} 天
						</view>
					</view>
					<view class="model-bg ss-flex-col ss-col-center ss-row-right">
						<view class="title ss-m-b-64">签到成功</view>
						<view class="ss-m-b-40">
							<button class="ss-reset-button confirm-btn" @tap="onConfirm">确认</button>
						</view>
					</view>
				</view>
			</su-popup>

		</view>

		<view class="card-box" v-if="isPass">
			<view class="card-item">
				<view class="item" @click="myOrder(1)">
					<uv-icon name="outline-empty-wallet-time" customPrefix="iconfont" color="var(--text-main)"
						size="30"></uv-icon>
					<view class="name">待付款</view>
					<tui-badge v-if="numData.orderCount['unpaidCount'] > 0" absolute top="30rpx" right="30rpx"
						:scaleRatio="0.8" type="green">{{numData.orderCount['unpaidCount']}}</tui-badge>
				</view>

				<view class="item" @click="myOrder(2)">
					<uv-icon name="outline-timer-1" custom-prefix="iconfont" color="var(--text-main)"
						size="30"></uv-icon>
					<view class="name">待服务</view>
				</view>

				<view class="item" @click="myOrder(3)">
					<uv-icon name="outline-timer-start" customPrefix="iconfont" color="var(--text-main)"
						size="30"></uv-icon>
					<view class="name">服务中</view>
				</view>

				<view class="item" @click="myOrder(4)">
					<uv-icon name="vuesax-outline-task-square" custom-prefix="iconfont" color="var(--text-main)"
						size="30"></uv-icon>
					<view class="name">已完成</view>
				</view>
			</view>
		</view>

		<view class="card-box" v-if="isPass && peiwanEnabled && clerk.id > 0">
			<view class="title">接单中心</view>
			<view class="card-item">

				<view class="item" @click="receiveOrder">
					<uv-icon name="jiedan" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">接单中心</view>
				</view>

				<view class="item" @click="blindOrder">
					<uv-icon name="snatch" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">抢单中心</view>
				</view>

				<view class="item" @click="workerList">
					<uv-icon name="dianyuan" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">达人资料</view>
				</view>

				<view class="item" @click="reward">
					<uv-icon name="zhaopiandashangjilu" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">打赏记录</view>
				</view>

			</view>
		</view>

		<view class="card-box">
			<view class="card-item">

				<view class="item">
					<uv-icon name="shimingrenzheng" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">实名认证</view>
				</view>

				<view class="item" v-if="isPass && peiwanEnabled" @click="toApply">
					<uv-icon name="dianyuan1" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">达人申请</view>
				</view>

				<view class="item" @click="toFans">
					<uv-icon name="xingxing" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">收藏达人</view>
				</view>

				<view class="item" v-if="friendEnabled" @click="youhuiquan">
					<uv-icon name="youhuiquan" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">优惠券</view>
				</view>

				<view class="item" @click="cashApply">
					<uv-icon name="tixian" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">申请提现</view>
				</view>

				<view class="item" @click="fenxiao">
					<uv-icon name="tixian" customPrefix="iconfont" size="30"  color="var(--text-main)"></uv-icon>
					<view class="name">分享</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import sheep from '@/sheep';
	import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import VipCard from '@/pages/tabbar/components/mine/vipCard.vue';
	import { showAuthModal	} from '@/sheep/hooks/useModal';
	import SignInApi from '@/sheep/api/member/signin';

	export default {
		components: {
			VipCard,
			tuiBadge,
		},
		data() {
			return {
				nickname: '请先登陆',
				loading: true,
				signInfo: {}, // 签到信息
				signConfigList: [], // 签到配置列表
				maxDay: 0, // 最大的签到天数
				showModel: false, // 签到弹框
				signResult: {}, // 签到结果
			}
		},
		async created() {
			try {
				// 并行加载数据以提高性能
				await Promise.all([
					this.getSignInfo(),
					this.getSignConfigList()
				]);
			} catch (error) {
				console.error('加载签到数据失败:', error);
			}
		},
		computed: {
			userInfo: {
				get() {
					return sheep.$store('user').userInfo;
				},
			},
			isLogin: {
				get() {
					return sheep.$store('user').isLogin;
				},
			},
			numData: {
				get() {
					return sheep.$store('user').numData;
				},
			},
			clerk() {
				return sheep.$store('sys').currentClerk;
			},
			brokerageEnabled() {
				return sheep.$store('user').tradeConfig.brokerageEnabled;
			},
			peiwanEnabled() {
				return sheep.$store('user').tradeConfig.peiwanEnabled;
			},
			friendEnabled() {
				return sheep.$store('user').tradeConfig.friendEnabled
			},
			isPass() {
				return sheep.$store('user').tradeConfig.weixinEnabled;
			},
		},
		methods: {
			toApply() {
				uni.showModal({
					title: '达人申请',
					content: '请确认是否成年，未成年禁止申请，申请后会有客服添加进行微信实名认证！',
					success: function(res) {
						if (res.confirm) {
							sheep.$router.go('/pages/worker/workerList/index');
						}
					},
				});
			},
			toFans() {
				sheep.$router.go('/pages/clerk/fans/list');
			},
			toVip() {
				sheep.$router.go('/pages/user/vip');
			},
			receiveOrder() {
				sheep.$router.go('/pages/order/worker/list');
			},
			blindOrder() {
				sheep.$router.go('/pages/order/blind/list');
			},
			myOrder(type) {
				sheep.$router.go('/pages/order/my/list', {
					type: type
				});
			},
			cashApply() {
				sheep.$router.go('/pages/commission/wallet');
			},
			fenxiao() {
				uni.showModal({
					title: '分销申请',
					content: '点击邀请海报，生成海报，生成邀请码，邀请一人下单，可得下单20%佣金！',
					success: function(res) {
						if (res.confirm) {
							sheep.$router.go('/pages/commission/index');
						}
					},
				});
			},
			workerList() {
				sheep.$router.go('/pages/worker/workerList/index');
			},
			youhuiquan() {
				sheep.$router.go('/pages/coupon/list', {
					type: 'all'
				});
			},
			wallet() {
				sheep.$router.go('/pages/user/wallet/money')
			},
			point() {
				sheep.$router.go('/pages/user/wallet/score')
			},
			sign() {
				sheep.$router.go('/pages/app/sign')
			},
			toGift() {
				sheep.$router.go('/pages/reward/list')
			},
			toTrend() {
				sheep.$router.go('/pages/trend/my/list')
			},
			reward() {
				sheep.$router.go('/pages/reward/list')
			},
			// 复制
			onCopy(text) {
				if (text) {
					sheep.$helper.copyText(text + "");
				}
			},
			async editUser() {
				if (!this.friendEnabled) {
					sheep.$router.go('/pages/user/info')
					return;
				}

				if (this.isLogin) {
					if (this.isPass) {
						await sheep.$store('user').getInfo();
						showAuthModal('chatAuthorization');
					}
				} else {
					showAuthModal();
				}
			},
			// 获得个人签到统计
			async getSignInfo() {
				try {
					const {
						code,
						data
					} = await SignInApi.getSignInRecordSummary();
					if (code !== 0) {
						return;
					}
					this.signInfo = data;
					this.loading = false;
				} catch (error) {
					console.error('获取签到信息失败:', error);
				}
			},
			// 获取签到配置
			async getSignConfigList() {
				try {
					const {
						code,
						data
					} = await SignInApi.getSignInConfigList();
					if (code !== 0) {
						return;
					}
					this.signConfigList = data;
					if (data.length > 0) {
						this.maxDay = data[data.length - 1].day;
					}
				} catch (error) {
					console.error('获取签到配置失败:', error);
				}
			},
			  // 签到确认刷新页面
			onConfirm() {
				this.showModel = false;
			},
			// 发起签到
			async onSign() {
				const {
					code,
					data
				} = await SignInApi.createSignInRecord();
				if (code !== 0) {
					return;
				}
				this.showModel = true;
				this.signResult = data;
				// 重新获得签到信息
				await this.getSignInfo();
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main-box {
		margin-top: 100rpx;
		background-color: var(--bg-main);
		position: absolute;
		left: 0px;
		right: 0px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.info-box {
			//background-color: #fff;
			padding: 15px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding-bottom: 0;
		}

		.avatar-box {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.nickname-box {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				margin-left: 10px;

				.vip-box {
					display: flex;
					align-items: center;

					.nickname {
						font-size: 15px;
						font-weight: bold;
					}

					.vip-img {
						width: 38rpx;
						height: 38rpx;
						margin-left: 5px;
					}
				}

				.id-box {
					margin: 5px 0;
					font-size: 12px;
					color: #aaa;
					display: flex;
					flex-direction: row;

					.text {
						margin-right: 5px;
					}
				}

				.tag-box {
					display: flex;
					align-items: center;
					flex: 1;
					font-size: 24rpx;
					color: #303133;
				}
			}

			// .tag {
			// 	display: flex;
			// 	justify-content: center;
			// 	flex: 1;
			// 	flex-direction: row;
			// 	align-items: center;
			// 	font-size: 24rpx;
			// 	color: #303133;

			// 	.tag-num {
			// 		margin-bottom: 5px;
			// 		// font-size: 32rpx;
			// 		color: #9E9E9E;
			// 	}
			// }
		}

		.fans-box {
			display: flex;
			align-items: center;
			justify-content: left;
			padding: 20rpx 0;
			padding-top: 0;

			.tag-btn {
				background-color: var(--bg-card);
				border-radius: 20rpx;
				padding: 12rpx 20rpx;
				font-size: 25rpx;
				margin-right: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon-img {
					width: 50rpx;
					height: 50rpx;
					margin-right: 8rpx;
				}

			}
		}

	}


	.card-box {
		background-color: var(--bg-card);
		margin: 20rpx;
		margin-top: 0;
		border-radius: 10px;
		padding-bottom: 0;

		.title {
			font-size: 15px;
			font-weight: bolder;
			padding: 38rpx 0 10rpx 40rpx;
			color: var(--text-secondary);
		}

		.card-item {
			display: flex;
			flex-wrap: wrap;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				padding: 20rpx 0;
				position: relative;

				.name {
					margin-top: 10rpx;
					font-size: 11px;
					color: var(--text-main);
				}
			}
		}
	}

	.swiper-box {
		height: 320rpx;
	}

	.co-right {
		display: flex;
		justify-content: center;
		padding: 10px;
		font-size: 10px;
	}
</style>


<style lang="scss" scoped>
	// 日历
	.calendar {
		width: 100%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background: var(--bg-card);
		color: var(--text-main);

		.sign-everyday {
			padding-top: 20rpx !important;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.sign-everyday-title {
				font-size: 28rpx;
			}

			.sign-num-box {
				font-size: 26rpx;
				font-weight: 500;

				.sign-num {
					font-size: 30rpx;
					font-weight: 600;
					color: #ff6000;
					padding: 0 10rpx;
				}
			}

			.sign-btn {
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
				color: var(--text-main);
			}

			.already-btn {
				background: var(--bg-card-secondary);
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 35rpx;
				font-size: 28rpx;
			}
		}

		.calendarView {
			padding: 0 20rpx;
			height: 160rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		// 年月日
		.bar {
			height: 100rpx;

			.date {
				font-size: 30rpx;
				font-family: OPPOSANS;
				font-weight: 500;
				color: var(--text-main);
				line-height: normal;
			}
		}

		.cicon-back {
			margin-top: 6rpx;
			font-size: 30rpx;
			color: var(--text-main);
			line-height: normal;
		}

		.cicon-forward {
			margin-top: 6rpx;
			font-size: 30rpx;
			color: var(--text-main);
			line-height: normal;
		}

		// 星期
		.week {
			.week-item {
				font-size: 24rpx;
				font-weight: 500;
				color: var(--text-main);
				flex: 1;
			}
		}

		// 日历表
		.myDateTable {
			display: flex;
			flex-wrap: wrap;

			.dateCell {
				width: calc(750rpx / 7);
				height: 80rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: var(--text-main);
			}
		}
	}

	.is-sign {
		width: 48rpx;
		height: 48rpx;
		position: relative;

		.is-sign-num {
			font-size: 24rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			line-height: normal;
		}

		.is-sign-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.cell-num {
		font-size: 24rpx;
		font-family: OPPOSANS;
		font-weight: 500;
		color: var(--text-main);
		line-height: normal;
	}

	.cicon-title {
		position: absolute;
		right: -10rpx;
		top: -6rpx;
		font-size: 20rpx;
		color: red;
	}


	//签到信息弹框
	.model-box {
		width: 520rpx;
		background:  var(--bg-card);
		border-radius: 20rpx;

		.cicon-check-round {
			font-size: 70rpx;
			color: var(--text-main);
		}

		.score-title {
			font-size: 34rpx;
			font-weight: 500;
			color: var(--text-main);
		}

		.model-title {
			font-size: 28rpx;
			font-weight: 500;
			color: var(--text-secondary);
		}

		.model-bg {
			width: 520rpx;
			height: 194rpx;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				color: var(--text-main);
			}

			.subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}

			.cancel-btn {
				width: 220rpx;
				height: 70rpx;
				border: 2rpx solid #ff6000;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}

			.confirm-btn {
				width: 220rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #ff6000, #fe832a);
				box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: normal;
			}
		}
	}

	.reward {
		background-image: url(/static/images/icon_gold_more.png);
		width: 75rpx;
		height: 56rpx;
	}

	.rewardTxt {
		width: 74rpx;
		height: 32rpx;
		background-color: #64DD17;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 32rpx;
	}

	.venusSelect {
		background-image: url(/static/images/icon_gold.png);
	}

	.venus {
		background-image: url(/static/images/icon_gold.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 66rpx;
		height: 66rpx;
		margin: 5rpx 0;
	}

	.num {
		font-size: 24rpx;
	}

	.reward {
		background-image: url(/static/images/icon_gold_more.png);
		width: 66rpx;
		height: 66rpx;
	}
</style>